<template>
	<view class="me-select-item-wrap-box">
		<view class="me-select-item-wrap" v-for="(item, index) in data__list" :key="index">
			<view class="me-select-item-left" :class="{'scan': editModel}">
				<view @tap="itemTap(item, index)">
					<slot :slot-scope="{item: item, index:index}"></slot>
				</view>
				<image @tap="tap(index, false)" :class="{'up': editModel}" v-show="editModel && item.select" class="select-icon"
				 src="../../static/unselect.png" mode=""></image>
				<image @tap="tap(index, true)" :class="{'up': editModel}" v-show="editModel && !item.select" class="select-icon"
				 src="../../static/select.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import meSelect from '@/components/me-select/me-select.vue'
	export default {
		components: {
			meSelect
		},
		data() {
			return {
				data__list: [],
				editModel: false,
				selectNum: 0,
				selectArr: [],
			}
		},
		props: {
			datalist: {
				type: Array,
				require: true
			},
			options: {
				type: Object,
				require: true
			},
		},
		watch: {
			datalist: {
				handler(n, o) {
					this.data__list = n
				},
				deep: true
			},
			data__list: {
				handler(n, o) {
					var selectNum = 0
					var tem = []
					if (this.data__list.length > 0) {
						this.data__list.forEach((item, index) => {
							item.select && selectNum++
							if (this.options.flags.length <= 0) {
								item.select && tem.push(item)
							} else {
								var tItem = {}
								this.options.flags.forEach((item2) => {
									//tItem[item2] = item[item2]
									tItem = item
								})
								tItem['index'] = index
								item.select && tem.push(tItem)
							}
						})
					}
					this.selectArr = tem
					this.selectNum = selectNum
					this.$emit('change', this.selectArr)
				},
				deep: true
			}
		},
		created() {
			this.data__list = this.datalist
		},
		methods: {
			itemTap(item, index) {
				/* if (this.options.itemCanSelect && this.editModel) {
					this.data__list[index].select = !this.data__list[index].select
				}
				if (!this.editModel) {
					this.$emit('itemClick', item)
				} */
			},
			changeModel() {
				this.editModel = !this.editModel
			},
			getSelectAll() {
				let selectDataList=[];
				this.selectArr.forEach((item)=>{
					let dataItem = {
					};
					dataItem['id'] = item.id;
					dataItem['select'] = item.select;
					dataItem['userId'] = item.userId;
					dataItem['contractCode'] = item.contractCode;
					dataItem['url'] = item.url;
					dataItem['destinationCoin'] = item.destinationCoin;
					dataItem['sourceCoin'] = item.sourceCoin;
					dataItem['exchangeType'] = item.exchangeType;
					dataItem['strategyType'] = item.strategyType;
					dataItem['coverTime'] = item.coverTime;
					dataItem['rate'] = item.rate;
					dataItem['amount'] = item.amount;
					dataItem['floatProfit'] = item.floatProfit;
					dataItem['direction'] = item.direction;
					dataItem['leverRate'] = item.leverRate;
					dataItem['lock'] = item.lock;
					selectDataList.push(dataItem);
				})
				return selectDataList;
			},
			selectAll() {
				this.data__list.forEach((item, index) => {
					item.select = true
				})
			},
			unSelectAll() {
				this.data__list.forEach((item, index) => {
					item.select = false
				})
			},
			tap(index, value) {
				this.data__list[index].select = value
			},
			finish() {
				if (this.selectArr.length <= 0) return
				this.$emit('finish', this.selectArr)
			}
		}

	}
</script>

<style scoped>
	.me-select-item-wrap-box {
		padding: 20upx;
		box-sizing: border-box;
	}

	.me-select-item-wrap {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		margin: 20upx 0;
	}


	.me-select-item-left {
		min-height: 40upx;
		width: 100%;
		transition: width .1s linear;
	}

	.me-select-item-left .select-icon {
		height: 40upx;
		width: 40upx;
	}

	.me-select-item-left.scan {
		width: 94%;
	}

	.me-select-item-left .select-icon {
		position: absolute;
		left: 5upx;
		top: 43%;
		transform: translateY(-50%);
		z-index: -1;
	}

	.me-select-item-left .select-icon.up {
		z-index: 1;
	}

	.bot-fixed-wrap {
		position: fixed;
		background-color: #FFFFFF;
		display: flex;
		bottom: 0;
		left: 0;
		border-top: 1upx solid red;
		width: 100%;
		height: 100upx;
		z-index: 99;
	}

	.but {
		line-height: 100upx;
		text-align: center;
		height: 100upx;
		width: 50%;
	}

	.but.un {
		color: #999999;
	}

	.but:first-child {
		border-right: 1upx solid red;
	}

	.but.danger {
		color: red;
	}
</style>
